<template>
  <div class="chat-window">
    <div class="chat-messages" ref="chatMessages">
      <div v-for="message in messages" :key="message" class="message" :class="{ 'sent': message.type === 1 }">
        <div class="message-content">
          <pre v-if="message.type === 1">{{ message.msg }}</pre>
          <div v-else-if="message.type === 3" class="thinking-animation">
            <span></span><span></span><span></span>
          </div>
          <Markdown v-else :source="message.msg" class="markdown-body" />
        </div>

      </div>
    </div>
    <!-- 右侧下方聊天内容输入框 -->
    <div class="chat-input">
      <textarea v-model="newMessage" @keydown.enter.prevent="handleEnterPress"
        placeholder="发消息、输入 @ 选择技能或 / 选择文件"></textarea>
      <div class="input-tools">
        <div class="tools-left">
          <el-button class="tool-btn" @click="showDevelopingMessage">
            <el-icon>
              <Paperclip />
            </el-icon>
          </el-button>
          <el-button class="tool-btn deep-thinking" @click="showDevelopingMessage">
            <el-icon>
              <MagicStick />
            </el-icon>
          </el-button>
        </div>
        <div class="tools-spacer"></div>
        <div class="tools-right">
          <el-button class="tool-btn" @click="showDevelopingMessage">
            <el-icon>
              <Picture />
            </el-icon>
          </el-button>
          <el-button class="tool-btn" @click="showDevelopingMessage">
            <el-icon>
              <Scissor />
            </el-icon>
          </el-button>
          <el-button class="tool-btn" @click="showDevelopingMessage">
            <el-icon>
              <Phone />
            </el-icon>
          </el-button>
          <el-button class="tool-btn" @click="showDevelopingMessage">
            <el-icon>
              <Microphone />
            </el-icon>
          </el-button>
          <div class="divider"></div>
          <el-button class="send-btn" @click="sendMessage" type="primary" :disabled="!newMessage.trim()">
            发送
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, nextTick } from 'vue';
import Markdown from 'vue3-markdown-it';
import { ElMessage } from "element-plus";
import { Paperclip, MagicStick, Picture, Scissor, Phone, Microphone } from '@element-plus/icons-vue';

// 定义组件接收的属性
const props = defineProps({
  messages: {
    type: Array,
    default: () => []
  },
  currentSession: {
    type: Object,
    default: () => ({})
  }
});

// 定义组件发出的事件
const emit = defineEmits(['send-message']);

// 引用聊天消息容器
const chatMessages = ref(null);
// 新消息输入框内容
const newMessage = ref('');


/**
 * 滚动到聊天框底部
 */
const scrollToBottom = async () => {
  await nextTick();
  if (chatMessages.value) {
    const lastMessage = chatMessages.value?.children[chatMessages.value.children.length - 1];
    if (lastMessage) {
      lastMessage.scrollIntoView({ behavior: 'smooth', block: 'end' });
    }
  }
};

/**
 * 处理回车事件
 */
const handleEnterPress = () => {
  sendMessage();
};

// 发送消息
const sendMessage = async () => {
  const value = newMessage.value;
  if (!value) {
    return ElMessage.warning('请输入问题');
  }

  emit('send-message', value);
  newMessage.value = '';

  scrollToBottom();
};

/**
 * 显示功能开发中提示
 */
const showDevelopingMessage = () => {
  ElMessage({
    message: '功能开发中',
    type: 'info',
    duration: 2000
  });
};

// 暴露给父组件的方法
defineExpose({
  scrollToBottom
});
</script>

<style scoped lang="scss">
.chat-window {
  width: 75%;
  display: flex;
  flex-direction: column;
  background-color: #fafbfc; // 更淡的背景色
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background-color: #fafbfc;

  .message {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;

    .message-content {
      max-width: 85%;
      padding: 14px 18px;
      border-radius: 18px;
      position: relative;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      transition: transform 0.2s ease;

      &:hover {
        transform: translateY(-2px);
      }
    }

    pre {
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 14px;
      line-height: 1.6;
    }

    :deep(.think) {
      display: inline-block;
      padding: 0 10px;
      color: #999999;
      font-size: 13px;
      background-color: #f2f2f2;
      border-radius: 12px;
    }

    p {
      margin: 0;
      line-height: 1.5;
      padding: 5px 0;
    }

    :deep(p) {
      margin: 0;
      line-height: 1.5;
      padding: 5px 0;
    }

    &:not(.sent) .message-content {
      align-self: flex-start;
      background-color: #ffffff;
      border-top-left-radius: 4px;
      margin-right: auto;

      &::before {
        content: '';
        position: absolute;
        bottom: 8px;
        left: -6px;
        width: 12px;
        height: 12px;
        background-color: #ffffff;
        border-radius: 50% 0 50% 50%;
        transform: rotate(45deg);
        z-index: -1;
        box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.02);
      }
    }

    &.sent {
      text-align: right;

      .message-content {
        margin-left: auto;
        background-color: #e7f5ff;
        border-top-right-radius: 4px;

        &::before {
          content: '';
          position: absolute;
          bottom: 8px;
          right: -6px;
          width: 12px;
          height: 12px;
          background-color: #e7f5ff;
          border-radius: 50% 50% 0 50%;
          transform: rotate(45deg);
          z-index: -1;
          box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.02);
        }

        pre {
          background-color: transparent;
          padding: 0;
        }
      }
    }
  }
}

.chat-input {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background-color: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.04);

  textarea {
    height: 50px;
    padding: 14px 18px;
    border: 1px solid #e8e8e8;
    border-radius: 18px;
    resize: none;
    font-size: 15px;
    transition: all 0.3s ease;
    line-height: 1.5;
    background-color: #f9f9fb;

    &:focus {
      outline: none;
      border-color: #409EFF;
      box-shadow: 0 0 8px rgba(64, 158, 255, 0.2);
      background-color: #ffffff;
    }

    &::placeholder {
      color: #c0c4cc;
      opacity: 1;
    }
  }

  .input-tools {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;

    .tools-left,
    .tools-right {
      display: flex;
      align-items: center;
      gap: 8px;

      .tool-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        border: none;
        background-color: #f6f7fa;
        color: #606266;
        border-radius: 12px;
        cursor: pointer;
        font-size: 16px;
        transition: all 0.3s ease;
        height: 36px;
        width: 36px;

        &:hover {
          background-color: #eef1f6;
          transform: translateY(-2px);
        }

        &.deep-thinking {
          background-color: #ecf5ff;
          color: #409EFF;

          &:hover {
            background-color: #d9ecff;
          }
        }
      }
    }

    .tools-spacer {
      flex: 1;
    }

    .divider {
      width: 1px;
      height: 24px;
      background-color: #e8e8e8;
      margin: 0 10px;
    }

    .send-btn {
      padding: 8px 20px;
      border: none;
      background-color: #409EFF;
      color: #fff;
      border-radius: 18px;
      cursor: pointer;
      font-size: 15px;
      transition: all 0.3s ease;
      height: 36px;

      &:hover {
        background-color: #66b1ff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
      }

      &:disabled {
        background-color: #a0cfff;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }
    }
  }
}

// 为 Markdown 内容添加样式
:deep(.markdown-body) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 0;
  font-size: 15px; /* 从14px增大到15px */
}

:deep(.markdown-body h1),
:deep(.markdown-body h2),
:deep(.markdown-body h3),
:deep(.markdown-body h4),
:deep(.markdown-body h5),
:deep(.markdown-body h6) {
  color: #111;
  margin-top: 16px;
  margin-bottom: 12px;
  font-weight: 600;
  line-height: 1.25;
}

:deep(.markdown-body h1) {
  font-size: 1.8em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

:deep(.markdown-body h2) {
  font-size: 1.4em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

:deep(.markdown-body h3) {
  font-size: 1.25em;
}

:deep(.markdown-body h4) {
  font-size: 1em;
}

:deep(.markdown-body h5) {
  font-size: 0.875em;
}

:deep(.markdown-body h6) {
  font-size: 0.85em;
  color: #6a737d;
}

:deep(.markdown-body p) {
  margin-bottom: 16px;
}

:deep(.markdown-body a) {
  color: #0366d6;
  text-decoration: none;
}

:deep(.markdown-body a:hover) {
  text-decoration: underline;
}

:deep(.markdown-body code) {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
}

:deep(.markdown-body pre) {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 3px;
}

:deep(.markdown-body pre code) {
  padding: 0;
  background-color: transparent;
}

:deep(.markdown-body blockquote) {
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
}

:deep(.markdown-body ul),
:deep(.markdown-body ol) {
  padding-left: 2em;
  margin-bottom: 16px;
}

:deep(.markdown-body li) {
  margin-bottom: 4px;
}

:deep(.markdown-body table) {
  display: block;
  width: 100%;
  overflow: auto;
  margin-bottom: 16px;
}

:deep(.markdown-body table th) {
  font-weight: 600;
}

:deep(.markdown-body table th),
:deep(.markdown-body table td) {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

:deep(.markdown-body table tr) {
  background-color: #fff;
  border-top: 1px solid #c6cbd1;
}

:deep(.markdown-body table tr:nth-child(2n)) {
  background-color: #f6f8fa;
}


.thinking-animation {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;

  span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background-color: #409EFF;
    border-radius: 50%;
    animation: bounce 1.2s infinite ease-in-out;
  }

  span:nth-child(1) {
    animation-delay: -0.32s;
  }

  span:nth-child(2) {
    animation-delay: -0.16s;
  }

  span:nth-child(3) {
    animation-delay: 0;
  }
}

@keyframes bounce {

  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}
</style>